<template>
  <div>
    <el-button type="primary" size="small" @click="add">新增</el-button>

    <el-table :data="tableData">
      <el-table-column label="选择水果不重复" prop="value">
        <template v-slot="scope">
          <el-select v-model="scope.row.value" @change="changeOptions">
            <el-option v-for="item in myOptions" :key="item.value" :value="item.value" :label="item.label"/>
          </el-select>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
export default {
  name: "options2",
  data() {
    return {
      tableData: [
        {value: ''},
      ],
      options: [
        {label: '西瓜', value: '1'},
        {label: '柠檬', value: '2'},
        {label: '葡萄', value: '3'},
        {label: '苹果', value: '4'},
        {label: '香蕉', value: '5'},
        {label: '火龙果', value: '6'},
        {label: '凤梨', value: '7'},
      ],
      myOptions: [
        {label: '西瓜', value: '1'},
        {label: '柠檬', value: '2'},
        {label: '葡萄', value: '3'},
        {label: '苹果', value: '4'},
        {label: '香蕉', value: '5'},
        {label: '火龙果', value: '6'},
        {label: '凤梨', value: '7'},
      ],
    }
  },
  methods: {
    add() {
      this.tableData.push({value: ''})
    },
    changeOptions() {
      let pos = []
      this.tableData.forEach(item => {
        if (item.value) {
          pos.push(item.value)
        }

      })
      pos = Array.from(new Set(pos)).sort()
      let myOptions = this.options.concat()

      for(let i = myOptions.length - 1;i >=0; i--){
        for(let j = 0 ;j < pos.length;j++){
           if(myOptions[i].value === pos[j]){
             myOptions.splice(i,1)
           }
        }
      }
      this.myOptions = JSON.parse(JSON.stringify(myOptions))

    }
  }
}
</script>

<style scoped>

.el-button {
  float: left;
}

.el-select {
  width: 150px;
  margin: 10px;
}

</style>
